<template>
  <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
    <!-- 搜索框 -->

    <el-form :inline="true" :model="formUser" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formUser.user" placeholder="搜索"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="userSelect" :plain="true" type="refresh"
          >搜索</el-button
        >

        <!-- 添加按钮 -->
        <el-button type="primary" @click="addUserForm = true"> 添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 添加模块 -->
    <el-dialog title="添加分类" :visible.sync="addUserForm">
      <el-form :model="userForm">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-model="userForm.name"
            ref="name"
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 添加按钮 -->
        <el-button type="primary" @click="addUserFormtwo = true">
          添加</el-button
        >
        <br />
        <br />
        <br />
        <el-select v-model="value1" placeholder="请选择">
          <el-option
            v-model="userForm.parent"
            ref="parent"
            v-for="item in options1"
            :key="item.value1"
            :label="item.label"
            :value1="item.value1"
          >
          </el-option>
        </el-select>
        <!-- 添加按钮 -->
        <el-button type="primary" @click="addUserFormtwo = true">
          添加</el-button
        >
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUserForm = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addUserFormClick()"
          :addConfirmLoading="false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 子添加模块1 -->
    <el-dialog :visible.sync="addUserFormtwo">
      <el-form :model="userFormtwo">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input
            v-model="userFormtwo.name"
            ref="name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="addUserFormClick()"
          :addConfirmLoading="false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 子添加模块2 -->
    <el-dialog :visible.sync="addUserFormthree">
      <el-form :model="userFormThree">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input
            v-model="userFormThree.parent"
            ref="name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="addUserFormClick()"
          :addConfirmLoading="false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ID" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分类名称" prop="name"> </el-table-column>
      <el-table-column label="父分类" prop="parent"></el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope" align="center">
          <el-switch
            v-model="scope.row.isRecommendTwo"
            active-color="#52C4CD"
            @change="handelUpdate(scope.$index, scope.row)"
            inactive-color="#DCDFE6"
            :active-value="true"
            :inactive-value="false"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      // 添加按钮
      addUserForm: false,
      userForm: {},
      addUserFormtwo: false,
      userFormtwo: {
          name:''
      },
      addUserFromthree: false,
      userFormThree: {
          parent:''
      },
      //查询
      formUser: [
        {
          user: "",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
       options1: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value1: "",
    };
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
    },
     // 添加按钮点击事件方法
    addUserFormClick() {
      var name = this.$refs.name.value.trim();
      var parent = this.$refs.parent.value.trim();
      // 添加加载中
      this.addConfirmLoading = true;

      postAddUser(name,parent )
        .then((res) => {
          // console.log(res);
          if (res.code === 1000) {
            // 添加加载中
            this.addConfirmLoading = false;
            // 关闭添加模态框
            this.addUserForm = false;
            // 用户添加成功后提示信息
            this.$message({
              showClose: true,
              message: "添加成功！",
              type: "success",
            });
            // 清空输入框
            this.userForm.name = "";
            this.userForm.parent = "";
            // 刷新页面（// provide / inject 组合刷新页面）
            this.reload();
          } else if (res.code === 1001) {
            // 添加加载中
            this.addConfirmLoading = false;
            // 用户添加失败（用户名重复）后提示信息
            this.$message({
              showClose: true,
              message: "分类名称重复,添加失败",
              type: "warning",
            });
          }
          console.log(res.msg);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查询
     userSelect() {
      // console.log(this.formUser.user);
      var searchContent = this.formUser.user;
      // console.log(searchContent);
      if (searchContent !== "") {
        // 搜索框存在类容
        postSelectUser(searchContent)
          .then((data) => {
            console.log(data);
            if (data.data.length != 0) {
              // 有查询到数据
              // console.log(data.data);

              this.tableData = data.data;
            } else {
              // 未查询到数据
              this.$message({
                message: "未搜索到数据哦",
                type: "warning",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        // 搜索框为空
        this.$message({
          message: "搜索框不能为空哦",
          type: "warning",
        });
      }
    },
    // 刷新按钮点击事件
    refresh() {
      this.reload();
    },


  },
};
</script>